<style scoped>
body {
  background-color: rgba(18, 33, 43);
  overflow: hidden;
  margin: 0%;
  padding: 0%;
  height: 100%;
  font-family: "微软雅黑";
}
#header {
  height: 21%;
  display: flex;
  justify-content: space-between;
}
/* 内容栏样式 */
#content {
  transition: all 0.3s ease; /* 过渡效果 */
  background-color: rgba(18, 33, 43);
  height: 79%; /* 内容区域高度为页面的70% */
  display: flex; /* 启用Flexbox布局 */
  justify-content: space-between; /* 子元素之间的间隔均匀分布 */
  justify-content: center; /* 水平居中 */
  transform: all 0.3 ease;
}
.LeftTitle {
  position: relative;
  left: -10%;
}
.content-left-HomePage {
  background-color: rgba(18, 33, 43);
  width: 35%; /* 内容栏宽度为页面宽度的20% */
  color: rgb(163, 236, 240);
}
/* 选择所有的无序列表 */
.content-left-HomePage ul {
  list-style-type: none; /* 移除默认的列表项标记 */
}
.content-left-HomePage h {
  font-size: 2.1em;
  font-weight: bolder;
  position: relative;
  left: 18%;
  cursor: pointer;
}
.content-left-HomePage p {
  font-size: 1.5em;
}
.content-left-HomePage li {
  font-size: 1.3em;
  margin-bottom: 0.15em;
}

.content-left-ContentPage {
  background-color: rgba(18, 33, 43);
  width: 35%; /* 内容栏宽度为页面宽度的20% */
  color: rgb(163, 236, 240);
}
.content-left-ContentPage p {
  /* display: none; */
  font-size: 1.5em;
  margin-top: 0.08em;
  margin-bottom: 0.08em;
  transition: all 0.3s ease; /* 过渡效果 */
}
.content-left-ContentPage h {
  font-size: 2.1em;
  font-weight: bolder;
  position: relative;
  left: 18%;
}
.content-left-ContentPage h1 {
  font-size: 1.5em;
  font-weight: bolder;
  position: relative;
  left: 21%;
  margin-top: 0.8em;
  cursor: pointer;
}
.introduction-box {
  overflow: hidden;
  position: relative;
  left: 24%;
  width: 75%;
  transition: all 0.5s ease; /* 过渡效果 */
}
.introduction-box-hidden {
  height: 0em;
}

.policy-box {
  height: 10000%;
  overflow: hidden;
  margin-top: 1em;
  position: relative;
  left: 24%;
  transition: all 0.5s ease; /* 过渡效果 */
}

.Parcel-box {
  height: 16em;
  overflow: hidden;
  margin-top: 1em;
  position: relative;
  left: 24%;
  transition: all 0.5s ease; /* 过渡效果 */
}
.Parcel-box-hidden {
  height: 0em;
  visibility: hidden;
  margin-top: 1em;
  position: relative;
  left: 24%;
  transition: all 0.5s ease; /* 过渡效果 */
  overflow: hidden;
}

.Parcel-box table {
  position: relative;
  left: -10%;
  width: 75%;
  border-collapse: collapse;
  margin: auto;
}

.Parcel-box th,
td {
  border: 1px solid rgb(163, 236, 240);
  padding: 2px;
  background-color: rgb(18, 33, 43);
  text-align: center;
  vertical-align: middle;
}
.Parcel-box thead th {
  background-color: rgb(163, 236, 240);
  color: black;
}
.blockImg {
  margin-top: 1em;
  position: relative;
  left: 25%;
  height: 17em;
  width: 30em;
  transition: all 0.5s ease; /* 过渡效果 */
}
.blockImg-hidden {
  margin-top: -1em;
  height: 0em;
  visibility: hidden;
}

.policy-box #policy {
  display: flex;
  margin-top: 5%;
  width: 80%;
}
#policy-ico {
  display: inline-block; /* 将span转换为内联块级元素 */
  width: 0.4em;
  height: 10%;
  background-color: rgb(188, 244, 186);
  color: rgb(188, 244, 186);
  margin-right: 1%;
  border-radius: 10px;
}
#policy-content {
  /* white-space: nowrap; */
  text-decoration: none;
}
#policy-content a {
  font-size: 1em;
  cursor: pointer;
  color: rgb(163, 236, 240);
}
/* 为每个列表项添加自定义的白色正方形标记 */
ul li::before {
  content: "■"; /* 这是HTML实体表示一个正方形 */
  color: rgb(163, 236, 240); /* 设置正方形的颜色为白色 */

  width: 1em; /* 设置宽度 */
  height: 1em; /* 设置高度 */
  line-height: 1; /* 行高，确保文本垂直居中 */
  margin-right: 0.5em; /* 在标记和文本之间添加一些右边距 */
}
/* 地图区域样式 */
#map4 {
  /* background-color: rgba(243, 237, 237, 0.918); */
  transition: all 0.3s ease; /* 过渡效果 */
  overflow: hidden;
  position: relative;
  width: 65%;
}

#blockInformation {
  width: 30%;
  display: flex; /* 启用Flexbox布局 */
  flex-wrap: wrap; /* 允许项目换行 */
}
.iframe-container {
  z-index: 999;
  width: 60%;
  height: 0;
  overflow: hidden;
  transition: height 0.5s; /* 平滑过渡效果 */
}
.iframe-container.active {
  height: 80%; /* 根据需要调整高度 */
}
#title {
  width: 35%; /* 内容栏宽度为页面宽度的20% */
  display: flex; /* 启用Flexbox布局 */
  flex-direction: column; /* 使子元素垂直排列 */
  background-color: rgb(18, 33, 43);
}
#content-top {
  background-color: rgba(18, 33, 43);
  width: 65%; /* 内容栏宽度为页面宽度的20% */
  flex-direction: column; /* 使子元素垂直排列 */
}
#top1 {
  /* background-color: rgba(83, 160, 215, 0.5); */
  height: 58%;
  display: flex; /* 启用Flexbox布局 */
  justify-content: space-between; /* 子元素之间的间隔均匀分布 */
}
#map-select {
  background-color: rgba(18, 33, 43);
  width: 41%;
  display: flex; /* 启用Flexbox布局 */
  position: relative;
  left: 10.5%;
  top: 40%;
}
#map-select .select-item01 {
  color: rgb(183, 244, 175);
  font-size: 2.4em;
  font-weight: bold;
  cursor: pointer;
}
#map-select .line1 {
  background-color: rgb(183, 244, 175);
  width: 14.4em;
  height: 0.4em;
}
.select-item01-close {
  color: rgb(186, 198, 200);
  font-size: 2.4em;
  font-weight: bold;
  cursor: pointer;
}
.line1-close {
  background-color: rgb(186, 198, 200);
  width: 14.4em;
  height: 0.4em;
}
#select-item02 {
  position: relative;
  left: 15%;
}
#map-select .select-item02-close {
  color: rgb(186, 198, 200);
  font-size: 2.4em;
  font-weight: bold;
  cursor: pointer;
}
.select-item02 {
  color: rgb(183, 244, 175);
  font-size: 2.4em;
  font-weight: bold;
  cursor: pointer;
}
#map-select .line2-close {
  background-color: rgb(186, 198, 200);
  position: relative;
  width: 14.4em;
  height: 0.4em;
}
.line2 {
  background-color: rgb(183, 244, 175);
  width: 14.4em;
  height: 0.4em;
}
/* 搜索框样式 */
#search-box {
  background-color: rgba(18, 33, 43);
  width: 40%;
}
.search-input {
  padding: 0px 0px 0px 1em;
  font-size: 1.3em;
  color: white; /* 设置文本颜色为白色 */
  /* visibility: hidden; */
  position: relative;
  top: 40%;
  right: -67%;
  /* width: 19%; */
  width: 19%;
  height: 40%;
  border-radius: 0.8em;
  border: 0.08em solid gray;
  background-color: transparent; /* 设置背景色为透明 */
  transition: all 0.3s ease; /* 过渡效果 */
}
.searchBtn {
  position: relative;
  right: -79%;
  width: 8%;
  height: 30%;
  z-index: 999;
  background-image: url("../assets/images/查找图标.png");
  background-size: 100%;
}
/* 针对input文本框设置焦点时的样式 */
input:focus {
  border-color: white; /* 将边框颜色设置为白色 */
  outline: 0.05em solid white; /* 可选：保留轮廓，但改为白色 */
}
/* 下拉菜单样式 */
#select-box {
  background-color: rgba(18, 33, 43);
  height: 42%;
  display: flex; /* 启用Flexbox布局 */
  justify-content: space-between; /* 子元素之间的间隔均匀分布 */
}
.list {
  position: relative;
  width: 20%;
  height: 80%;
  top: 5%;
  left: 10.5%;
}
#list2 {
  position: relative;
  left: -6%;
}
#list3 {
  position: relative;
  left: -23%;
}
#list4 {
  position: relative;
  left: 34%;
}
.listBtn1 {
  display: inline-block; /* 将span转换为内联块级元素 */
  position: relative;
  width: 78%;
  height: 64%;
  background-color: rgb(130, 140, 142);
  cursor: pointer;
  display: flex; /* 启用Flexbox布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  transition: all 0s ease; /* 过渡效果 */
}
.listBtn1 p {
  font-weight: bold;
  font-size: 1.8em;
}
.listBtn2 {
  display: inline-block; /* 将span转换为内联块级元素 */
  position: relative;
  width: 13%;
  height: 64%;
  left: 80%;
  top: -64%;
  background-color: rgb(130, 140, 142);
  background-image: url("../assets/images/下拉按钮.png");
  background-position: center center;
  cursor: pointer;
  transition: all 0 ease; /* 过渡效果 */
}
.listLine {
  background-color: rgb(130, 140, 142);
  position: relative;
  width: 78%;
  height: 8%;
  top: -60%;
  left: 0%;
}
/* 下拉内容的初始样式 */
.dropdown-content {
  height: 0%;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  top: -50%;
  width: 93%;
  border-top: 0.08em solid rgb(18, 33, 43);
  transition: all 0.5s ease; /* 过渡效果 */
  z-index: 9999;
}
.dropdown-content a {
  position: relative;
  top: 1%;
}
#dropdown2 {
  display: flex; /* 启用Flexbox布局 */
  justify-content: space-between; /* 子元素之间的间隔均匀分布 */
  width: 187%;
  height: 1000%;
  visibility: hidden;
  position: relative;
  top: -10%;
  z-index: 9999;
}
.dropdown-content2 {
  height: 0%;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  top: -4.5%;
  width: 49.9%;
  border-top: 0.08em solid rgb(18, 33, 43);
  transition: all 0.6s ease; /* 过渡效果 */
}
.dropdown-content2 a {
  position: relative;
  top: 0.1%;
}
.dropdown-content2 a:hover {
  color: white;
}
.dropdown-content2 a:hover .dropdown {
  /* background-color: rgba(186,198,200,0.8); */
  background-color: rgba(239, 242, 242, 0.8);
}
/* 鼠标悬停时下拉内容显示 */
.dropdown:hover .dropdown-content2 {
  height: 100%;
  visibility: visible;
}

/* 下拉项样式 */
.content-a {
  background-color: rgba(130, 140, 142, 0.8);
  font-size: 1.25em;
  color: black;
  font-weight: bold;
  transition: color 0.3s ease; /* 添加过渡效果，颜色变化持续0.3秒 */
  padding: 0.3em 0.4em;
  text-decoration: none;
  display: block;
  cursor: pointer;
  border-bottom: 0.08em solid rgb(18, 33, 43);
  border-left: 0.08em solid rgb(18, 33, 43);
  border-right: 0.08em solid rgb(18, 33, 43);
}
.dropdown-content a:hover {
  color: white;
}
.dropdown-content a:hover .dropdown {
  /* background-color: rgba(186,198,200,0.8); */
  background-color: rgba(239, 242, 242, 0.8);
}
/* 鼠标悬停时下拉内容显示 */
.dropdown:hover .dropdown-content {
  height: 1000%;
  visibility: visible;
}
.dropdown:hover .listBtn1 {
  background-color: rgb(186, 198, 200);
}
.dropdown:hover .listBtn2 {
  background-color: rgb(186, 198, 200);
}
.dropdown:hover .listLine {
  background-color: rgb(186, 198, 200);
}
/* 标题样式 */
#BigHeadline {
  height: 46%;
  display: flex; /* 启用Flexbox布局 */
  justify-content: space-between; /* 子元素之间的间隔均匀分布 */
}
#BigHeadline #Words-cn {
  width: 100%;
}
#Words-cn p {
  display: inline;
  color: rgb(183, 244, 175);
  font-size: 3.5em;
  font-weight: bold;
  margin: 0;
  padding: 0;
  position: relative;
  left: 10%;
  top: 29%;
}
#BigHeadline #Year {
  margin-left: 2%;
  color: rgb(183, 244, 175);
  font-size: 2em;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
#Words-English {
  height: 15%;
}
#Words-English p {
  color: rgb(183, 244, 175);
  font-size: 1.5em;
  font-weight: bold;
  margin: 0;
  padding: 0;
  position: relative;
  left: 10%;
}
#backHome {
  height: 39%;
}
#backHome div {
  position: relative;
  left: 9%;
  top: 12%;
  width: 18%;
  height: 51%;
  background-image: url("../assets/images/返回首页.png");
  background-size: 100% 100%;
  cursor: pointer;
}
#backHome div p {
  color: rgb(183, 244, 175);
  font-size: 1.2em;
  margin: 0;
  padding: 0;
  position: relative;
  left: 30%;
  top: 20%;
}
.Information-box {
  margin: 0.5% 1.5% 0.5% 1.5%;
  display: flex;
  width: 30%;
  height: 11%;
  flex-direction: column; /* 使子元素垂直排列 */
  justify-content: space-between;
  opacity: 0;
  transition: opacity 0.5s ease;
  /* background-color: rgb(241, 83, 15); */
}
.Information-hidden {
  margin: 0.5% 1.5% 0.5% 1.5%;
  display: flex;
  width: 30%;
  height: 11%;
  flex-direction: column; /* 使子元素垂直排列 */
  justify-content: space-between;
  opacity: 1;
  transition: opacity 0.5s ease;
  /* background-color: rgb(241, 83, 15); */
}
#blockName {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(127, 222, 222, 0.8);
  border-radius: 5px;
  font-size: 0.8em;
  color: aliceblue;
  font-weight: bolder;
  position: relative;
  white-space: nowrap; /* 不换行 */
  text-overflow: ellipsis; /* 显示省略符号 */
  flex-basis: 20%;
  margin-bottom: 2%;
}
#blockName p {
  margin: 1%;
}
#Information {
  display: flex;
  padding: 5px;
  align-items: center;
  background-color: rgba(127, 222, 222, 0.5);
  border-radius: 5px;
  font-size: 0.75em;
  color: aliceblue;
  position: relative;
  text-overflow: ellipsis; /* 显示省略符号 */
  flex-basis: 80%;
}
#Information p {
  margin: 1%;
}
#map {
  width: 100%;
  height: 100%;
  z-index: 999;
}
</style>

<template>
  <body>
    <!-- 头部导航栏 -->
    <div id="header">
      <div id="title">
        <div id="BigHeadline">
          <div id="Words-cn">
            <p>南沙区产业地图</p>
            <p id="Year">(2024)</p>
          </div>
        </div>

        <div id="Words-English">
          <p>NANSHA&emsp;&ensp;INDUSTRIAL&emsp;&ensp;MAP</p>
        </div>
        <div id="backHome" @click="backHome()">
          <div><p>返回首页</p></div>
        </div>
      </div>

      <div id="content-top">
        <div id="top1">
          <div id="map-select">
            <div id="select-item01" @click="selectMap1()">
              <div class="select-item01">行业门类地图</div>
              <div class="line1"></div>
            </div>

            <div id="select-item02" @click="selectMap2()">
              <div class="select-item02-close">产业园区地图</div>
              <div class="line2-close"></div>
            </div>
          </div>

          <div id="search-box">
            <input
              type="text"
              class="search-input"
              v-model="inputName"
              :style="searchBtnSty"
              @keyup.enter="findBlock()"
              placeholder="&emsp;请输入园区名称"
            />
            <div @click="toggleSearch()" id="searchBtn" class="searchBtn"></div>
          </div>
        </div>

        <div id="select-box" v-show="selectBoxShow">
          <div class="dropdown list">
            <span class="listBtn1"><p>2大支柱产业</p></span>
            <span class="listBtn2"></span>
            <div class="listLine"></div>
            <div class="dropdown-content">
              <a
                @click="changeContent(0, index)"
                v-for="(item, index) in data[0]['children']"
                :key="index"
                class="content-a"
                >{{ item["title"] }}</a
              >
            </div>
          </div>

          <div id="list2" class="dropdown list">
            <span class="listBtn1"><p>5大战新产业</p></span>
            <span class="listBtn2"></span>
            <div class="listLine"></div>
            <div class="dropdown-content">
              <a
                @click="changeContent(1, index)"
                v-for="(item, index) in data[1]['children']"
                :key="index"
                class="content-a"
                >{{ item["title"] }}</a
              >
            </div>
          </div>

          <div id="list3" class="dropdown list">
            <span class="listBtn1"><p>2大未来产业</p></span>
            <span class="listBtn2"></span>
            <div class="listLine"></div>
            <div class="dropdown-content">
              <a
                @click="changeContent(2, index)"
                v-for="(item, index) in data[2]['children']"
                class="content-a"
                :key="index"
                >{{ item["title"] }}</a
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="content">
      <!-- 左侧内容栏2 -->
      <div class="content-left-ContentPage">
        <div class="LeftTitle">
          <h>>| {{ data[titleID]["children"][childrenID]["title"] }}</h>
          <h1 @click="showIntroduction">>| 发展现状</h1>
          <div class="introduction-box">
            <p v-show="introductionShow">
              {{ data[titleID]["children"][childrenID]["introduction"] }}
            </p>
            <p
              v-show="
                introductionShow &&
                data[titleID]['children'][childrenID]['master'] != ''
              "
            >
              产业链主：{{ data[titleID]["children"][childrenID]["master"] }}
            </p>
          </div>

          <h1 @click="showPolicy">>| 政策导引</h1>
          <div class="policy-box" :style="policyShow">
            <div
              v-for="(item, index) in data[titleID]['children'][childrenID][
                'policy'
              ]"
              id="policy"
              :key="index"
            >
              <span id="policy-ico">|</span>
              <span id="policy-content"
                ><a @click="openPdf(item)">{{ item }}</a></span
              >
            </div>
          </div>
        </div>
      </div>

      <!-- 行业门类地图 -->
      <div id="map4">
        <!--  leaflet地图 -->
        <div id="map"></div>
      </div>
    </div>
  </body>
</template>

<script>
/*eslint-disable*/

import JSdata from "../json/产业链-导航.json";
import JSdata1 from "../json/区块信息.json";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import Imgurl from "@/json/底图url.json";

import { getCurrentInstance, onMounted, ref, props } from "vue";
import * as esri from "esri-leaflet";
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import "leaflet.echarts-layer";
import "@/api/leaflet-echarts.js";
import "@/api/echarts.source.js";
import * as echart from "echarts";
import pubsub from "pubsub-js";

import defaultIcon from "leaflet/dist/images/marker-icon.png";
import chartOptions from "@/api/chartsOption.js";
import 智能网联与新能源汽车 from "@/GIS-json/产业链/智能网联与新能源汽车.json";
import 现代高端装备 from "@/GIS-json/产业链/现代高端装备.json";
import 人工智能 from "@/GIS-json/产业链/人工智能.json";
import 半导体与集成电路 from "@/GIS-json/产业链/半导体与集成电路.json";
import 生物医药与健康 from "@/GIS-json/产业链/生物医药与健康（含高端医疗器械）.json";
import 新型储能 from "@/GIS-json/产业链/新型储能.json";
import 商业航天 from "@/GIS-json/产业链/商业航天.json";
import 海洋经济 from "@/GIS-json/产业链/海洋经济.json";
import 空天经济 from "@/GIS-json/产业链/空天经济.json";
import 区界取反 from "@/GIS-json/区界取反.json";
import axios from "axios";

export default {
  data() {
    return {
      subList: [],
      data: JSdata,
      data1: JSdata1,
      searchBtnSty: {
        visibility: "hidden",
        width: "0%",
        left: "80%",
        position: "relative",
      },
      introductionShow: true,
      policyShow: {
        visibility: "visible",
        height: "18em",
      },
      titleID: 0,
      childrenID: 0,

      mapID: 1,
      selectBoxShow: true,
      inputName: "",
      blockID: 0,
      parcelShow: false,
      imgShow: false,
      chainName:"智能网联与新能源汽车",
    };
  },
  methods: {
    //展开与关闭搜索框
    toggleSearch() {
      if (this.searchBtnSty.visibility === "visible") {
        this.searchBtnSty.visibility = "hidden";
        this.searchBtnSty.width = "0%";
        this.searchBtnSty.left = "80%";
      } else {
        this.searchBtnSty.visibility = "visible";
        this.searchBtnSty.width = "73%";
        this.searchBtnSty.left = "13%";
      }
    },

    showIntroduction() {
      this.introductionShow = !this.introductionShow;
    },

    showPolicy() {
      if (this.policyShow.visibility === "visible") {
        this.policyShow.visibility = "hidden";
        this.policyShow.height = "0em";
      } else {
        this.policyShow.visibility = "visible";
        this.policyShow.height = "18em";
      }
    },

    openPdf(pdf_name) {
      const pdfUrl = "http://localhost:8086/PolicyPdf/" + pdf_name + ".pdf";
      window.open(pdfUrl, "_blank");
    },

  },
  components: {
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const route = useRoute();
    const router = useRouter();

    let map4;

    let chartMap;

    let interval;

    let industryChain;

    let chainDataList = {
      智能网联与新能源汽车,
      现代高端装备,
      人工智能,
      半导体与集成电路,
      生物医药与健康,
      新型储能,
      商业航天,
      海洋经济,
      空天经济,
    };

    onMounted(() => {

      proxy.titleID = route.query.titleID;
      proxy.childrenID = route.query.childrenID;

      industryChain = chainDataList[proxy.chainName];
      console.log(proxy.chainName);
      // 初始化地图对象
      initMap();
      // 添加掩膜
      addMask();
      // pubsub订阅
      subscribeList();
      // 制作图表地图
      chartMap = drawEcharts();

      // setInterval(function(){
      //   console.log(industryChain)
      // },100);

    });

    // 初始化地图
    function initMap() {
      // 地图初始化,1
      map4 = L.map("map", {
        preferCanvas: true, // 制图canvas优先显示
        attributionControl: false, // 隐藏信息控件
        zoomControl: false, // 隐藏缩放控件
        maxZoom: 13,
        minZoom: 11,
      });
      map4.dragging.disable();
      map4.scrollWheelZoom.disable();

      // 地图视图定位
      //   map4.setView([22.72, 113.51], 11);
      map4.setView([22.74, 113.51], 8);
      setTimeout(() => {
        map4.setView([22.74, 113.51], 12);
      }, 500);

      // 添加深色底图为初始底图
      L.tileLayer(
        "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
      ).addTo(map4);

      // 图标初始化
      let size = 25;
      const DefaultIcon = L.icon({
        iconUrl: defaultIcon,
        iconSize: [size, size],
      });
      L.Marker.prototype.options.icon = DefaultIcon;

      map4.on("click", (e) => {
        console.log(e.latlng);
      });
    }

    // 添加掩膜
    function addMask() {
      // 坐标XY转置
      区界取反.features[0].geometry.rings.forEach((element) => {
        let rings = [];
        element.forEach((e) => {
          if (e[0] > 100) {
            rings.push(e.reverse());
          } else {
            rings.push(e);
          }
        });
        // 绘制面要素
        L.polygon(rings, {
          color: "rgba(18, 33, 43, 0.9)",
          weight: 0,
          fillOpacity: 0.95,
          opacity: 1,
        }).addTo(map4);
      });
    }

    // 编辑option
    function makeOption() {
      let chainOption = chartOptions["图表地图-产业链"];

      //   console.log(industryChain);
      //   console.log(chartOptions["图表地图-产业链"].series[0].geoCoord);
      //   console.log(chartOptions["图表地图-产业链"].series[1].markLine.data);
      let coordList = {};
      let pointList = [];
      let pointList1 = [];

      industryChain.features.forEach((element) => {
        coordList[element.attributes["Name1"]] = [
          element.attributes.x,
          element.attributes.y,
        ];
        coordList[element.attributes["Name1"] + "1"] = [
          element.attributes.x,
          element.attributes.y,
        ];

        pointList.push([
          {
            name: element.attributes["Name1"],
            value: 6,
          },
          {
            name: element.attributes["Name1"] + "1",
            value: 6,
          },
        ]);

        pointList1.push({
          name: element.attributes["Name1"],
        });
      });
      //   console.log(coordList);
      //   console.log(pointList);

      chainOption.series[0].geoCoord = coordList;
      chainOption.series[1].markLine.data = pointList;
      chainOption.series[1].markPoint.data = pointList1;

      return chainOption;
    }

    //绘制图表地图
    function drawEcharts() {
      let option = makeOption();
      console.log(option);
      var overlay = new L.echartsLayer(map4, echarts);
      var chartsContainer = overlay.getEchartsContainer();
      var myChart = overlay.initECharts(chartsContainer);
      window.onresize = myChart.onresize;
      overlay.setOption(option);
      return myChart;
    }

    //  pubsub订阅
    function subscribeList() {
      proxy.subList.push(
        pubsub.subscribe("routerChange", (n, data) => {
          // 去除旧图表地图
          if (chartMap != undefined) {
            chartMap.dispose();
          }
          clearInterval(interval);
        })
      );
    }

    function changeContent(titleID, childrenID) {
      proxy.introductionShow = true;
      proxy.titleID = titleID;
      proxy.childrenID = childrenID;


      proxy.chainName = proxy.data[proxy.titleID]['children'][proxy.childrenID]['title'];

      industryChain = chainDataList[proxy.chainName];
        
      chartMap.dispose();
      
      chartMap = drawEcharts();

      proxy.policyShow = {
        visibility: "visible",
        height: "18em",
      };
    }

    //切换到首页page1
    function backHome() {
      router.push({
        path: "/",
        query: {},
      });
    }
    function selectMap1() {
      proxy.selectBoxShow = !proxy.selectBoxShow;
    }

    //切换到page2
    function selectMap2() {
      router.push({
        path: "/page2",
        query: {},
      });
    }

    // 切换到区块页page3 并传递blockID 未完成
    function findBlock() {
      console.log(proxy.inputName);
      let substring = proxy.inputName;
      proxy.inputName = "";
      for (let i = 0; i < proxy.data1.length; i++) {
        let str = proxy.data1[i].区块名;
        console.log(str);
        if (new RegExp(substring).test(str)) {
          console.log(`"${str}" 包含子字符串 "${substring}"`);
          proxy.blockID = i;
          router.push({
            path: "/page3",
            query: { blockID: proxy.blockID },
          });
          break;
        }
      }
    }

    return { backHome, selectMap1, selectMap2, findBlock, changeContent };
  },
  beforeUnmount() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
};
</script>